<template>
    <el-dialog :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
      :close-on-click-modal="false" draggable>
      <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
       <el-row :gutter="24">
    <el-col :span="24" class="mb20">
      <el-form-item prop="name" :label="$t('worldCountries.name')">
        <el-input v-model="form.name" :placeholder="$t('worldCountries.inputNameTip')" clearable show-word-limit :maxlength="100"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="iso3" :label="$t('worldCountries.iso3')">
        <el-input v-model="form.iso3" :placeholder="$t('worldCountries.inputIso3Tip')" clearable show-word-limit :maxlength="3"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="numericCode" :label="$t('worldCountries.numericCode')">
        <el-input v-model="form.numericCode" :placeholder="$t('worldCountries.inputNumericCodeTip')" clearable show-word-limit :maxlength="3"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="iso2" :label="$t('worldCountries.iso2')">
        <el-input v-model="form.iso2" :placeholder="$t('worldCountries.inputIso2Tip')" clearable show-word-limit :maxlength="2"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="phonecode" :label="$t('worldCountries.phonecode')">
        <el-input v-model="form.phonecode" :placeholder="$t('worldCountries.inputPhonecodeTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="capital" :label="$t('worldCountries.capital')">
        <el-input v-model="form.capital" :placeholder="$t('worldCountries.inputCapitalTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="currency" :label="$t('worldCountries.currency')">
        <el-input v-model="form.currency" :placeholder="$t('worldCountries.inputCurrencyTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="currencyName" :label="$t('worldCountries.currencyName')">
        <el-input v-model="form.currencyName" :placeholder="$t('worldCountries.inputCurrencyNameTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="currencySymbol" :label="$t('worldCountries.currencySymbol')">
        <el-input v-model="form.currencySymbol" :placeholder="$t('worldCountries.inputCurrencySymbolTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="tld" :label="$t('worldCountries.tld')">
        <el-input v-model="form.tld" :placeholder="$t('worldCountries.inputTldTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="native" :label="$t('worldCountries.native')">
        <el-input v-model="form.native" :placeholder="$t('worldCountries.inputNativeTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="region" :label="$t('worldCountries.region')">
        <el-input v-model="form.region" :placeholder="$t('worldCountries.inputRegionTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="regionId" :label="$t('worldCountries.regionId')">
        <el-input v-model="form.regionId" :placeholder="$t('worldCountries.inputRegionIdTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="subregion" :label="$t('worldCountries.subregion')">
        <el-input v-model="form.subregion" :placeholder="$t('worldCountries.inputSubregionTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="subregionId" :label="$t('worldCountries.subregionId')">
        <el-input v-model="form.subregionId" :placeholder="$t('worldCountries.inputSubregionIdTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="nationality" :label="$t('worldCountries.nationality')">
        <el-input v-model="form.nationality" :placeholder="$t('worldCountries.inputNationalityTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="timezones" :label="$t('worldCountries.timezones')">
        <el-input v-model="form.timezones" :placeholder="$t('worldCountries.inputTimezonesTip')" clearable show-word-limit :maxlength="65535"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="translations" :label="$t('worldCountries.translations')">
        <el-input v-model="form.translations" :placeholder="$t('worldCountries.inputTranslationsTip')" clearable show-word-limit :maxlength="65535"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="latitude" :label="$t('worldCountries.latitude')">
        <el-input v-model="form.latitude" :placeholder="$t('worldCountries.inputLatitudeTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="longitude" :label="$t('worldCountries.longitude')">
        <el-input v-model="form.longitude" :placeholder="$t('worldCountries.inputLongitudeTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="emoji" :label="$t('worldCountries.emoji')">
        <el-input v-model="form.emoji" :placeholder="$t('worldCountries.inputEmojiTip')" clearable show-word-limit :maxlength="191"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="emojiU" :label="$t('worldCountries.emojiU')">
        <el-input v-model="form.emojiU" :placeholder="$t('worldCountries.inputEmojiUTip')" clearable show-word-limit :maxlength="191"/>
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="createdAt" :label="$t('worldCountries.createdAt')">
        <el-input v-model="form.createdAt" :placeholder="$t('worldCountries.inputCreatedAtTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="updatedAt" :label="$t('worldCountries.updatedAt')">
        <el-input v-model="form.updatedAt" :placeholder="$t('worldCountries.inputUpdatedAtTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="flag" :label="$t('worldCountries.flag')">
        <el-input v-model="form.flag" :placeholder="$t('worldCountries.inputFlagTip')" clearable show-word-limit />
      </el-form-item>
    </el-col>

    <el-col :span="24" class="mb20">
      <el-form-item prop="wikiDataId" :label="$t('worldCountries.wikiDataId')">
        <el-input v-model="form.wikiDataId" :placeholder="$t('worldCountries.inputWikiDataIdTip')" clearable show-word-limit :maxlength="255"/>
      </el-form-item>
    </el-col>

			</el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script setup lang="ts" name="WorldCountriesDialog">
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/bizs/worldCountries'
const emit = defineEmits(['refresh']);

// 定义i18n
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

// 定义字典
import { useDict } from '/@/hooks/dict';

// 定义变量内容
const visible = ref(false)
const loading = ref(false)
const dataFormRef = ref();

// 提交表单数据
const form = reactive({
	id: '',
	name: '',
	iso3: '',
	numericCode: '',
	iso2: '',
	phonecode: '',
	capital: '',
	currency: '',
	currencyName: '',
	currencySymbol: '',
	tld: '',
	native: '',
	region: '',
	regionId: '',
	subregion: '',
	subregionId: '',
	nationality: '',
	timezones: '',
	translations: '',
	latitude: '',
	longitude: '',
	emoji: '',
	emojiU: '',
	createdAt: '',
	updatedAt: '',
	flag: '',
	wikiDataId: '',
});

// 定义校验规则
import { rule } from '/@/utils/validate';
const dataRules = ref({
    name: [ {required: false, message: t('worldCountries.inputNameTip'), trigger: 'blur'} ],
    iso3: [ {required: false, message: t('worldCountries.inputIso3Tip'), trigger: 'blur'} ],
    numericCode: [ {required: false, message: t('worldCountries.inputNumericCodeTip'), trigger: 'blur'} ],
    iso2: [ {required: false, message: t('worldCountries.inputIso2Tip'), trigger: 'blur'} ],
    phonecode: [ {required: false, message: t('worldCountries.inputPhonecodeTip'), trigger: 'blur'} ],
    capital: [ {required: false, message: t('worldCountries.inputCapitalTip'), trigger: 'blur'} ],
    currency: [ {required: false, message: t('worldCountries.inputCurrencyTip'), trigger: 'blur'} ],
    currencyName: [ {required: false, message: t('worldCountries.inputCurrencyNameTip'), trigger: 'blur'} ],
    currencySymbol: [ {required: false, message: t('worldCountries.inputCurrencySymbolTip'), trigger: 'blur'} ],
    tld: [ {required: false, message: t('worldCountries.inputTldTip'), trigger: 'blur'} ],
    native: [ {required: false, message: t('worldCountries.inputNativeTip'), trigger: 'blur'} ],
    region: [ {required: false, message: t('worldCountries.inputRegionTip'), trigger: 'blur'} ],
    regionId: [ {required: false, message: t('worldCountries.inputRegionIdTip'), trigger: 'blur'} ],
    subregion: [ {required: false, message: t('worldCountries.inputSubregionTip'), trigger: 'blur'} ],
    subregionId: [ {required: false, message: t('worldCountries.inputSubregionIdTip'), trigger: 'blur'} ],
    nationality: [ {required: false, message: t('worldCountries.inputNationalityTip'), trigger: 'blur'} ],
    timezones: [ {required: false, message: t('worldCountries.inputTimezonesTip'), trigger: 'blur'} ],
    translations: [ {required: false, message: t('worldCountries.inputTranslationsTip'), trigger: 'blur'} ],
    latitude: [ {required: false, message: t('worldCountries.inputLatitudeTip'), trigger: 'blur'} ],
    longitude: [ {required: false, message: t('worldCountries.inputLongitudeTip'), trigger: 'blur'} ],
    emoji: [ {required: false, message: t('worldCountries.inputEmojiTip'), trigger: 'blur'} ],
    emojiU: [ {required: false, message: t('worldCountries.inputEmojiUTip'), trigger: 'blur'} ],
    createdAt: [ {required: false, message: t('worldCountries.inputCreatedAtTip'), trigger: 'blur'} ],
    updatedAt: [ {required: false, message: t('worldCountries.inputUpdatedAtTip'), trigger: 'blur'} ],
    flag: [ {required: false, message: t('worldCountries.inputFlagTip'), trigger: 'blur'} ],
    wikiDataId: [ {required: false, message: t('worldCountries.inputWikiDataIdTip'), trigger: 'blur'} ],
})

// 打开弹窗
const openDialog = (id: string) => {
	visible.value = true
  	form.id = ''

  	// 重置表单数据
 	nextTick(() => {
		dataFormRef.value?.resetFields();
	});

  	// 获取信息
  	if (id) {
		form.id = id
		initFormData(id)
  	}
};

// 初始化表单
const initFormData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 提交表单
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
    loading.value = true;
		form.id ? await putObj(form) : await addObj(form);
		useMessage().success(form.id ? t('common.editSuccessText') : t('common.addSuccessText'));
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
    loading.value = false;
  }
};


// 暴露变量
defineExpose({
  openDialog
});
</script>